<div class="box">
    <div class="box-header with-border">
        <h3 class="box-title">发起外呼</h3>
    </div>
    <div class="box-body">
        <div class="row">
            <div class="col-md-6">
                <div class="form-group">
                    <label>手机端用户ID</label>
                    <input type="text" class="form-control" id="mobileUserId" placeholder="输入手机端用户ID">
                </div>
                <div class="form-group">
                    <label>电话号码</label>
                    <input type="text" class="form-control" id="phoneNumber" placeholder="输入要拨打的电话号码">
                </div>
                <button class="btn btn-primary" id="makeCallBtn">发起外呼</button>
            </div>
            <div class="col-md-6">
                <div class="call-status-container">
                    <h4>通话状态</h4>
                    <div id="callStatus" class="alert alert-info" style="display:none;"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const userId = '{{ $userId }}';
    const wsServer = '{{ $wsServer }}';
    let ws = null;
    
    // 初始化WebSocket连接
    function initWebSocket() {
        ws = new WebSocket(`${wsServer}?user_id=${userId}&user_type=pc`);
        
        ws.onopen = function() {
            console.log('WebSocket connected');
            // 发送认证信息
            ws.send(JSON.stringify({
                type: 'auth',
                user_id: userId,
                user_type: 'pc'
            }));
        };
        
        ws.onmessage = function(event) {
            const data = JSON.parse(event.data);
            console.log('Received:', data);
            
            if (data.type === 'call_response') {
                const statusDiv = document.getElementById('callStatus');
                statusDiv.style.display = 'block';
                
                if (data.status === 'accepted') {
                    statusDiv.className = 'alert alert-success';
                    statusDiv.innerHTML = `手机端已接受外呼请求，正在拨打 ${data.phone_number}`;
                } else {
                    statusDiv.className = 'alert alert-danger';
                    statusDiv.innerHTML = '手机端拒绝了外呼请求';
                }
                
                // 5秒后隐藏状态
                setTimeout(() => {
                    statusDiv.style.display = 'none';
                }, 5000);
            }
        };
        
        ws.onclose = function() {
            console.log('WebSocket disconnected');
            // 5秒后重连
            setTimeout(initWebSocket, 5000);
        };
    }
    
    // 发起外呼
    document.getElementById('makeCallBtn').addEventListener('click', function() {
        const mobileUserId = document.getElementById('mobileUserId').value;
        const phoneNumber = document.getElementById('phoneNumber').value;
        
        if (!mobileUserId || !phoneNumber) {
            Dcat.warning('请填写手机端用户ID和电话号码');
            return;
        }
        
        if (ws && ws.readyState === WebSocket.OPEN) {
            ws.send(JSON.stringify({
                type: 'call_request',
                from_user_id: userId,
                to_user_id: mobileUserId,
                phone_number: phoneNumber
            }));
            
            const statusDiv = document.getElementById('callStatus');
            statusDiv.style.display = 'block';
            statusDiv.className = 'alert alert-info';
            statusDiv.innerHTML = '正在向手机端发送外呼请求...';
        } else {
            Dcat.error('WebSocket连接未就绪，请稍后再试');
        }
    });
    
    // 初始化WebSocket
    initWebSocket();
});
</script>